<template>
  <div
    v-html="md.render(source)"
    class="markdown-body"
    style="font-size: 14px"
    @click="copy"
  />
</template>
<script>
import MarkdownIt from "markdown-it";
import MarkdownItAbbr from "markdown-it-abbr";
import MarkdownItAnchor from "markdown-it-anchor";
import MarkdownItFootnote from "markdown-it-footnote";
import hljs from "highlight.js";
import MarkdownItSub from "markdown-it-sub";
import MarkdownItSup from "markdown-it-sup";
import MarkdownItTasklists from "markdown-it-task-lists";
import MarkdownItTOC from "markdown-it-toc-done-right";
import ClipboardJS from "clipboard";
import "highlight.js/styles/atom-one-dark.css";
import { sqlTaskExecuteSql } from "@/api/console/executeSql";

export default {
  name: "Markdown",
  props: {
    source: {
      type: String,
      default: "",
    },
    loading: {
      type: Boolean,
    },
    executeSqlData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      aiValue: "",
      md: null,
    };
  },
  created() {
    let that = this;

    that.md = new MarkdownIt({
      html: true,
    })
      .use(MarkdownItAbbr)
      .use(MarkdownItAnchor)
      .use(MarkdownItFootnote)
      .use(MarkdownItSub)
      .use(MarkdownItSup)
      .use(MarkdownItTasklists)
      .use(MarkdownItTOC);
    that.md.set({
      highlight: function (str, lang) {
        if (lang && hljs.getLanguage(lang)) {
          try {
            return `<div class="code-block"><pre class="hljs"><code>${
              hljs.highlight(lang, str, true).value
            }</code></pre><button class="copy-btn" id='copy'>复制</button><button id ='execute'>执行</button></div>`;
          } catch (__) {}
        }
      },
    });
  },
  methods: {
    copyEl(text) {
      const input = document.createElement("textarea");
      input.value = text;
      document.body.appendChild(input);
      input.select();
      document.execCommand("copy");
      document.body.removeChild(input);
    },
    async copy(e) {
      const { tagName, id } = e.target;
      const clipboard = new ClipboardJS(e.target, {
        text: function () {
          return id == "copy"
            ? e.target.previousElementSibling.textContent
            : e.target.previousElementSibling.previousElementSibling
                .textContent;
        },
      });
      if (tagName == "BUTTON" && id == "copy") {
        this.copyEl(clipboard.text());
        this.$message.success("复制成功");
      }
      if (tagName == "BUTTON" && id == "execute") {
        const res = await sqlTaskExecuteSql({
          ...this.$props.executeSqlData,
          sqlContext: clipboard.text(),
        });
        this.$message[res.data.code == 500 ? "error" : "success"](res.data.msg);
      }
    },
  },
};
</script>

<style lang="scss">
.markdown-body {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 980px;

  .code-block {
    padding: 0 !important;
    background: rgb(42, 52, 62) !important;
    border-radius: 10px !important;

    button {
      margin: 10px !important;
    }

    pre {
      overflow: auto;
      padding: 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      margin: 0;
    }
  }
  li {
    margin: 10px 0 !important ;
  }
}

.markdown-body > * {
  margin: 10px 0 !important;
}

@media (max-width: 767px) {
  .markdown-body {
    padding: 15px;
  }
}
</style>
